// 基本信息
import DialogBox from "@/components/DialogBox";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
interface ServerForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<ServerForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: proxy?.$t("forward_serverdialog.formrule.name"), trigger: "change" }],
			host: [{ required: true, message: proxy?.$t("forward_serverdialog.formrule.host"), trigger: "change" }],
			port: [{ required: true, message: proxy?.$t("forward_serverdialog.formrule.port"), trigger: "change" }]
		});

		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		const changeType = () => {
			props.detail.username = "";
			props.detail.password = "";
			props.detail.dbName = "";
			props.detail.dbDriver = "";
			props.detail.dbTable = "";
			props.detail.url = "";
		};
		onMounted(() => {});
		return () => {
			return (
				<DialogBox
					{...attrs}
					width={props.width}
					title={props.title}
					onConfirm={() => {
						validData();
					}}
				>
					<div class="flex">
						<el-form class="flex-1" model={props.detail} ref={formRef} rules={formRule} label-width="100px">
							<el-form-item label={proxy?.$t("forward_serverdialog.form_label.type")} prop="type" style="display:none">
								<el-radio-group v-model={props.detail.type} disabled={props.detail.id ? true : false} onChange={changeType}>
									<el-radio label="MQTT">MQTT</el-radio>
									<el-radio label="HTTP">HTTP</el-radio>
									<el-radio label="DB">DB</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label={proxy?.$t("forward_serverdialog.form_label.name")} prop="name">
								<el-input v-model={props.detail.name} placeholder={proxy?.$t("forward_serverdialog.placeholder.name")} />
							</el-form-item>
							<el-form-item label={proxy?.$t("forward_serverdialog.form_label.host")} prop="host">
								<el-input v-model={props.detail.host} placeholder={proxy?.$t("forward_serverdialog.placeholder.host")} />
							</el-form-item>
							<el-form-item label={proxy?.$t("forward_serverdialog.form_label.port")} prop="port">
								<el-input
									v-model={props.detail.port}
									type="number"
									placeholder={proxy?.$t("forward_serverdialog.placeholder.port")}
								/>
							</el-form-item>
							{(props.detail.type == "MQTT" || props.detail.type == "DB") && (
								<div>
									<el-form-item label={proxy?.$t("forward_serverdialog.form_label.username")} prop="username">
										<el-input
											v-model={props.detail.username}
											placeholder={proxy?.$t("forward_serverdialog.placeholder.username")}
										/>
									</el-form-item>
									<el-form-item label={proxy?.$t("forward_serverdialog.form_label.password")} prop="password">
										<el-input
											v-model={props.detail.password}
											type="password"
											show-password
											autocomplete="new-password"
											placeholder={proxy?.$t("forward_serverdialog.placeholder.password")}
										/>
									</el-form-item>
								</div>
							)}
							{props.detail.type == "DB" && (
								<div>
									<el-form-item label={proxy?.$t("forward_serverdialog.form_label.db_driver")} prop="dbDriver">
										<el-select
											v-model={props.detail.dbDriver}
											disabled={props.detail.id}
											placeholder={proxy?.$t("forward_serverdialog.placeholder.db_driver")}
										>
											<el-option label="mysql" value="mysql" />
											<el-option label="postgres" value="postgres" />
											<el-option label="sqlserver" value="sqlserver" />
										</el-select>
									</el-form-item>
									<el-form-item label={proxy?.$t("forward_serverdialog.form_label.db_name")} prop="dbName">
										<el-input v-model={props.detail.dbName} placeholder={proxy?.$t("forward_serverdialog.placeholder.db_name")} />
									</el-form-item>
									<el-form-item label={proxy?.$t("forward_serverdialog.form_label.db_table")} prop="dbTable">
										<el-input
											v-model={props.detail.dbTable}
											placeholder={proxy?.$t("forward_serverdialog.placeholder.db_table")}
										/>
									</el-form-item>
								</div>
							)}
							{props.detail.type == "HTTP" && (
								<el-form-item label="URL" prop="url">
									<el-input v-model={props.detail.url} placeholder={proxy?.$t("forward_serverdialog.placeholder.url")} />
								</el-form-item>
							)}
						</el-form>
					</div>
				</DialogBox>
			);
		};
	}
});
